<template>
    <div>
   <h1>新增食谱页面</h1>
    </div>

    <table class="table">
        <thead>
            <tr>
                <td>名称</td>
                <td>
                    <input type="text" v-model="data.recipeName">
                </td>
            </tr>

             <tr>
                <td>食谱标题</td>
                <td>
                      <input type="text" v-model="data.recipeType">
                </td>
            </tr>


             <tr>
                <td>分类编号</td>
                <td>
                    <select v-model="data.classificationId">
                        <option value="0">==请选择分类==</option>
                        <option v-for="a in obj" :value="a.classificationId">{{a.classificationName}}</option>
                    </select>
                </td>
            </tr>
            
             <tr>
                <td>标签</td>
                <td>
                    <textarea v-model="data.label"></textarea>
                </td>
            </tr>

             <tr>
                <td>分享</td>
                <td>
                     <input type="text" v-model="data.share">
                </td>
            </tr>

             <tr>
                <td>图片</td>
                <td>
                    <input type="file" @change="set">
                    <img style="width:45px;height:45px" :src="axios.defaults.baseURL+data.recipeImg">
                </td>
            </tr>

             <tr>
                <td>发布时间</td>
                <td>
             <input type="date" v-model="data.recipeDate">
                </td>
            </tr>

             <tr>
                <td></td>
                <td>
                    <input type="button" value="新增" @click="add">
                </td>
            </tr>


        </thead>
    </table>
</template>

<script setup lang="ts">
 import axios from 'axios';
  import{ref,onMounted} from 'vue';
 import {useRouter} from 'vue-router';
   const router=useRouter();
    onMounted(()=>{
        classifications();
    })

     const obj=ref([{

    "classificationId": 0,
    "classificationName": ""

     }])

     const classifications=()=>{
         axios.get("https://localhost:7235/api/Classification/classifications").then(res=>{
               obj.value=res.data
         })
     }

 const set=(ed:any)=>{
      
       let f=ed.target.files[0];
       let fs=new FormData();
        fs.append("file",f);

         if(f.size>2*1024*1024){
             alert("文件大小只能是2MB")
              return;
         }
          //image/jpeg
         //image/png

         if(f.type!="image/jpeg"&&f.type!="image/png"){
              alert("文件格式只能是jpg")
               return;

         }
   
          

         axios.post("https://localhost:7235/api/Upload/Upol",fs).then(res=>{
              data.value.recipeImg=res.data;

         })
       
 }


 const data=ref({
      "recipeId": 0,
  "recipeName": "",
  "recipeType": "",
  "classificationId": 0,
  "label": "",
  "share": 0,
  "recipeImg": "string",
  "recipeDate": "2025-06-12T10:10:41.743Z",
  "isDeleted": true

 })




  const add=()=>{

  if(data.value.recipeName==""){
  alert("名称不能为空");
  return;
  }
   if(data.value.recipeType==""){
  alert("食谱标题不能为空");
  return;
   }
   
      if(data.value.classificationId==0){
  alert("分类编号不能为空");
  return;
   }
        if(data.value.label==""){
  alert("标签不能为空");
  return;
   }
    if(data.value.share==0){
  alert("分享不能为空");
  return;
   }



     axios.post("https://localhost:7235/api/Recipe/AddAnync",data.value).then(res=>{
          if(res.data>0){
         alert("新增成功")
          router.push("/sho")
          }else{
             alert("新增失败")
          }
     })
  }
</script> 

<style scoped>

</style>
